<template>
	<uni-popup ref="popup" type="bottom" background-color="#fff" borderRadius="16px 16px 0 0" :mask-click="false">
		<view class="popup-content">
			<view class="flex flex-between flex-center">
				<view class="col-000-8 font-18 font-600">
					<!-- 新建收藏集 -->
					{{$t('mine.createCollection')}}
				</view>
				<view class="close" @click="close">
					<uni-icons type="closeempty" color="rgba(0,0,0,0.4)" size="20"></uni-icons>
				</view>
			</view>
			<view class="form-box">
				<uni-section :title="$t('mine.collectionName')" titleColor="rgba(0, 0, 0, 0.80)">
					<view class="item">
						<uni-easyinput class="input" type="text" :styles="styles" :inputBorder="true" v-model="form.name" :placeholder="$t('mine.collectionName')" maxlength="20"></uni-easyinput>

					</view>
				</uni-section>
				<uni-section :title="$t('mine.chooseColor')" titleColor="rgba(0, 0, 0, 0.80)">
					<view class="item color-list">
						<view class="color-round" :class="{'on': colorIndex == index}" :style="{backgroundColor: item.color}" v-for="(item, index) in colorList" :key="index" @click="chooseColor(index)">
						</view>
					</view>
				</uni-section>
			</view>
			<view class="btn-box m-t-40">
				<view class="refresh-box flex-center-center font-14 col-fff" @click="doSub">
					{{$t('mine.confirmCreation')}}
				</view>
				<view class="refresh-box cancel flex-center-center font-14 col-000-8" @click="close">
					{{$t('mine.cancel')}}
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import collectionApi from '@/api/collection.js';
	export default {
		emits: ['addSuccess'],
		data() {
			return {
				styles: {
					borderColor: 'rgba(0,0,0,0.8);'
				},
				form: {
					name: '',
					color: ''
				},
				colorIndex: 0,
				colorList: [
					{
						color: 'rgba(250, 222, 250, 1)'
					},
					{
						color: 'rgba(220, 231, 255, 1)'
					},
					{
						color: 'rgba(209, 245, 236, 1)'
					},
					{
						color: 'rgba(215, 246, 211, 1)'
					},
					{
						color: 'rgba(249, 246, 209, 1)'
					},
					{
						color: 'rgba(255, 232, 214, 1)'
					},
					{
						color: 'rgba(255, 227, 227, 1)'
					},
				]
			}
		},
		methods: {
			reset() {
				this.form.name = '';
				this.form.color = '';
				this.colorIndex = 0;
			},
			chooseColor(index) {
				this.colorIndex = index;
			},
			doSub() {
				this.form.color = this.colorList[this.colorIndex].color;
				if(!this.form.name) {
					return uni.showToast({
						title: this.$t('mine.placeholderCollectName'),
						icon: 'none',
						duration: 3000
					});
				}
				if(!this.form.color) {
					return uni.showToast({
						title: this.$t('mine.placeholderColor'),
						icon: 'none',
						duration: 3000
					});
				}
				let obj = {
					collection_name: this.form.name,
					background_color: this.form.color
				}
				collectionApi.createCollection(obj).then(res => {
					// console.log(res)
					if(res.errCode === 0) {
						this.$emit('addSuccess')
						uni.showToast({
							title: res.errMsg,
							icon: 'none',
							duration: 3000
						});
						setTimeout(() => {
							this.close()
						}, 0)
					}
				})
			},
			open() {
				this.reset()
				this.$refs.popup.open('bottom')
			},
			close() {
				this.$refs.popup.close()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.refresh-box {
		width: 700rpx;
		height: 100rpx;
		border-radius: 16rpx;
		background-color: #000;
		margin: 0 auto 40rpx;
		&.cancel {
			background-color: #fff;
		}
	}
	.popup-content {
		width: 100%;
		height: 900rpx;
		padding: 40rpx;
		.close {
			width: 100rpx;
			height: 60rpx;
			text-align: right;
		}
	}
	.form-box {
		width: 100%;
		margin: 40rpx auto 0;
		.item {
			margin-bottom: 18rpx;
		}
		.input {
			border-radius: 16rpx;
			width: 100%;
			// border: 2rpx solid rgba(0,0,0,0.8);
			background-color: #fff;
		}
		.color-list  {
			width: 100%;
			display: flex;
			align-items: center;
		}
		.color-round {
			width: 72rpx;
			height: 72rpx;
			border-radius: 100%;
			border: 2rpx solid #fff;
			margin-right: 22rpx;
			&.on  {
				border: 2rpx solid rgba(0,0,0,0.8);
			}
			&:last-child {
				margin-right: 0;
			}
		}
	}
</style>